<!-- TreeItem.vue -->
<template>
  <div>
    <div class="tree-item" @click="handleClick">
      <div class="expand-icon-container" @click.stop="toggleExpand">
        <van-icon v-if="item.children && item.children.length" :name="isExpanded ? 'arrow-down' : 'arrow'" class="expand-icon"></van-icon>
      </div>
      <van-radio :name="item.id" v-model="selectedId" class="radio-item">{{ item.text }}</van-radio>
    </div>
    <div v-if="isExpanded && item.children && item.children.length" class="children">
      <tree-item v-for="child in item.children" :key="child.id" :item="child" :selected-id.sync="selectedId"></tree-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    item: {
      type: Object,
      required: true,
    },
    selectedId: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      isExpanded: false,
    };
  },
  methods: {
    handleClick() {
      // 点击整个 tree-item 时的处理逻辑
    },
    toggleExpand() {
      if (this.item.children && this.item.children.length) {
        this.isExpanded = !this.isExpanded;
      }
    },
  },
};
</script>

<style scoped>
.tree-item {
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
}

.expand-icon-container {
  position: absolute;
  left: 10px;
  width: 40px; /* 增加点击区域的宽度 */
  height: 40px; /* 增加点击区域的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.expand-icon {
  margin-right: 10px;
}

.radio-item {
  flex-grow: 1;
  padding-left: 36px; /* 确保无子级的左边距 */
}

.children {
  padding-left: 15px;
}
</style>